<template>
  <div class="maincontent">
    <div class="contentbox">
      <div class="printImg" v-loading="pdfLoading">
        <template v-if="pdfList.length > 0">
          <iframe class="pdfBox" :src="pdfPath" frameborder="0"></iframe>
        </template>
      </div>
      <div class="addadvice" v-loading="adviceLoading">
        <div class="header">
          <div class="title">审查意见录入</div>
          <div class="export" style="cursor: pointer;">
            <div class="dachuShenCha_item" @click="getExport">
              <i class="el-icon-upload2"></i> 导出审查意见
            </div>
            <div v-if="!isCurrentProcess" class="dachuShenCha_item" @click="handleCheckOpinion">
              <i class="el-icon-document-checked"></i> 校验审查意见
            </div>
          </div>
        </div>

        <div class="opinionType">
          <span :class="{ active: opinionTypeIndex == 0 }" @click="handleSelectOpinionType(0)">市中心意见</span>
          <span :class="{ active: opinionTypeIndex == 1 }" @click="handleSelectOpinionType(1)">区县意见</span>
        </div>
        <!-- 市中心意见 -->
        <div v-if="!showadd && opinionTypeIndex == 0">
          <div class="menulist">
            <div
              class="item"
              v-for="(item, index) in pdfList"
              :key="index"
              :class="{ active: pdfNum === index }"
              @click="changePdfNum(index)"
            >{{ item.fileName }}</div>
            <el-switch
              style="margin-top: 10px;"
              v-model="moreChange"
              inactive-text="批量修改"
              v-if="!isCurrentProcess"
            ></el-switch>
            <div style="margin: 20px 30px;" v-show="moreChange">
              <el-radio-group style="margin-right: 20px;" v-model="changeType.status">
                <el-radio :label="3">已修改</el-radio>
                <el-radio :label="2">未修改</el-radio>
              </el-radio-group>
              <el-button type="primary" size="small" @click="changeAdvice">确定</el-button>
              <el-button size="small" @click="moreChange = false">取消</el-button>
            </div>
            <el-button
              style="float:right;margin-right:10px;"
              @click="addadvice"
              type="primary"
              size="mini"
              v-if="!isCurrentProcess"
            >新增</el-button>
            <el-button
              style="float:right;margin-right:20px;"
              @click="handelCheckSuccess"
              type="primary"
              size="mini"
              v-if="adviceList.length == 0"
            >审核通过</el-button>
            <div style="clear:both;"></div>
          </div>
          <div class="advicelist">
            <div class="item" v-for="(item, index) in adviceList" :key="index">
              <div class="situation">
                <div class="msg" style="margin-top:0;">附件名称：{{ item.attachmentName }}</div>
                <div class="msg">问题描述：{{ item.content }}</div>
                <div class="msg">修改情况：{{ item.status | statusType }}</div>
                <div class="msg">审查时间：{{ item.updateTime || item.createTime }}</div>
              </div>
              <div class="other">
                <div style="display: flex; align-items: center;" v-if="!isCurrentProcess">
                  <el-button type="text" @click="changeOne(item.id)" v-if="item.status != 4">修改情况</el-button>
                  <div class="delete" @click="deleteOne(item.id)">删除</div>
                </div>
              </div>
            </div>
            <div v-if="adviceList.length == 0" style="padding-top:50px;text-align:center">暂无数据！</div>
          </div>
        </div>
        <!-- 区县意见 -->
        <div v-if="opinionTypeIndex == 1">
          <div class="advicelist">
            <div class="item" v-for="(item, index) in districtAdviceList" :key="index">
              <div class="situation">
                <div class="msg" style="margin-top:0;">附件名称：{{ item.attachmentName }}</div>
                <div class="msg">问题描述：{{ item.content }}</div>
                <div class="msg">审查时间：{{ item.updateTime || item.createTime }}</div>
              </div>
            </div>
            <div
              v-if="districtAdviceList.length == 0"
              style="padding-top:50px;text-align:center"
            >暂无数据！</div>
          </div>
        </div>
        <!-- 添加审查意见 -->
        <el-form v-if="showadd" :model="form" label-width="80px" style="margin-top:30px;">
          <el-form-item label="附件名称">
            <el-select placeholder="请选择" @change="setFileType" v-model="form.attachmentFileId">
              <el-option
                v-for="(item, index) in pdfList"
                :key="index"
                :label="item.fileName"
                :value="item.fileId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="问题描述">
            <el-input type="textarea" v-model="form.content" rows="4"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">提交</el-button>
            <el-button @click="showadd = false">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 修改情况弹窗 -->
    <el-dialog :close-on-click-modal="false" title="修改情况" :visible.sync="dialogVisible" width="30%">
      <div class="content">
        <el-radio-group style="margin-right: 20px;" v-model="changeTypeOne.status">
          <el-radio :label="3">已修改</el-radio>
          <el-radio :label="2">未修改</el-radio>
        </el-radio-group>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="changeAdviceOne">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import pdf from "vue-pdf";
import config from "@/config/index.js";
import {
  getPDF,
  getAdviceList,
  getExport,
  changeAdviceOne,
  deleteAdviceOne,
  addAdvice,
  changeAdvice
} from "@/api/feasibilityStudy/countyReview.js";
import { submitAdvice } from "@/api/feasibilityStudy/common.js";
import { submitProcessComeback, getFile } from "@/api/common.js";
export default {
  components: { pdf },
  data() {
    return {
      projectId: localStorage.getItem("projectId") * 1,
      form: {
        content: "",
        projectId: localStorage.getItem("projectId") * 1,
        linkId: "FEASIBILITY_STUDY_CITY_CENTER_EXAMINE",
        attachmentFileId: "",
        attachmentType: "",
        status: 1
      },
      showadd: false,
      moreChange: false,
      pdfNum: 0,
      pdfList: [],
      dialogVisible: false,
      changeTypeOne: {
        status: 3,
        id: ""
      },
      changeType: {
        status: 3,
        idStr: ""
      },
      adviceList: [],
      districtAdviceList: [],
      opinionTypeIndex: 0,
      pdfLoading: false,
      adviceLoading: false,
      pdfPath: "" // pdf文件地址
    };
  },
  computed: {
    isCurrentProcess: function() {
      let isTrue =
        localStorage.getItem("key") == "FEASIBILITY_STUDY_CITY_CENTER_EXAMINE";
      if (localStorage.getItem("lookStatus") == 2) {
        isTrue = false;
      }
      return !isTrue;
    }
  },
  watch: {
    pdfNum: function() {
      // this.pdfLoading = true;
    }
  },
  created() {
    this.getPDF();
  },
  methods: {
    onSubmit() {
      //提交新增审查意见
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      addAdvice(this.form)
        .then(res => {
          loading.close();
          this.$message({
            message: "提交成功！",
            type: "success"
          });
          this.showadd = false;
          this.getAdviceList();
        })
        .catch(res => {
          loading.close();
        });
    },
    addadvice() {
      //打开新增审查意见表单
      this.form = {
        content: "",
        projectId: this.projectId,
        linkId: "FEASIBILITY_STUDY_CITY_CENTER_EXAMINE",
        attachmentFileId: "",
        attachmentType: "",
        status: 1
      };
      this.showadd = true;
    },
    //一键审核通过
    handelCheckSuccess: function() {
      //提交新增审查意见
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      let params = {
        projectId: this.projectId,
        linkId: "FEASIBILITY_STUDY_CITY_CENTER_EXAMINE",
        attachmentFileId: this.pdfList[this.pdfNum].fileId,
        attachmentType: this.pdfList[this.pdfNum].fileType,
        status: 4,
        content: "无问题"
      };
      addAdvice(params)
        .then(res => {
          loading.close();
          this.$message({
            message: "提交成功！",
            type: "success"
          });
          this.showadd = false;
          this.getAdviceList();
        })
        .catch(res => {
          loading.close();
        });
    },
    setFileType(e) {
      //设置选中附件类型
      let index = this.pdfList.findIndex(a => a.fileId === e);
      this.form.attachmentType = this.pdfList[index].fileType;
    },
    changeAdvice() {
      //批量修改情况
      if (this.adviceList.length > 0) {
        const loading = this.$loading({
          lock: true,
          text: "Loading",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)"
        });
        let list = [];
        this.adviceList.forEach(a => {
          list.push(a.id);
        });
        this.changeType.idStr = list.join(",");
        changeAdvice(this.changeType)
          .then(res => {
            loading.close();
            this.$message({
              message: "提交成功！",
              type: "success"
            });
            this.getAdviceList();
          })
          .catch(res => {
            loading.close();
          });
      }
    },
    getPDF() {
      //获取pdf
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      getPDF({ projectId: this.projectId })
        .then(res => {
          loading.close();
          this.pdfList = res.data;
          this.getFile();
          this.getAdviceList();
        })
        .catch(res => {
          loading.close();
        });
    },
    getFile() {
      //获取文件
      this.pdfLoading = true;
      getFile({
        fileId: this.pdfList[this.pdfNum].fileId
      })
        .then(res => {
          this.pdfLoading = false;
          this.pdfPath = `${this.$https}${res.data.filePath}`;
        })
        .catch(res => {
          this.pdfLoading = false;
        });
    },
    //监听加载完成回调
    monitorPdfProgress: function(val) {
      if (val) {
        this.pdfLoading = false;
      }
    },
    //监听pdf加载错误回调
    monitorPdfError: function() {
      this.pdfLoading = false;
      this.$message({
        type: "error",
        message: "pdf加载失败！",
        offset: 80
      });
    },
    changePdfNum(num) {
      //切换pdf
      this.pdfNum = num;
      this.getFile();
      this.getAdviceList();
    },
    getExport() {
      //导出审查意见
      getExport({
        linkId: "FEASIBILITY_STUDY_CITY_CENTER_EXAMINE",
        projectId: this.projectId
      }).then(res => {
        let contentType = localStorage.getItem("contentType");
        if (contentType == "application/octet-stream;charset=UTF-8") {
          this.fileDownload(res, "审查意见.xlsx");
        } else {
          this.$message.warning("暂无数据可导出!!!");
        }
      });
    },
    fileDownload(data, fileName) {
      // 创建隐藏的可下载链接
      var eleLink = document.createElement("a");
      eleLink.download = fileName; // 必须携带格式的名称  比如  app.text 或者 index.html
      eleLink.style.display = "none";
      // 字符内容转变成blob地址
      var blob = new Blob([data]);
      eleLink.href = URL.createObjectURL(blob);
      // 触发点击
      document.body.appendChild(eleLink);
      eleLink.click();
      // 然后移除
      document.body.removeChild(eleLink);
    },
    // 市中心意见
    getAdviceList() {
      //获取意见列表
      this.adviceLoading = true;
      getAdviceList({
        fileType: this.pdfList[this.pdfNum].fileType,
        linkId: "FEASIBILITY_STUDY_CITY_CENTER_EXAMINE",
        projectId: this.projectId
      })
        .then(res => {
          this.adviceLoading = false;
          this.adviceList = res.data;
        })
        .catch(res => {
          this.adviceLoading = false;
        });
    },
    //区县意见
    getAdviceList1() {
      //获取意见列表
      getAdviceList({
        fileType: "",
        linkId: "FEASIBILITY_STUDY_DIST_EXAMINE",
        projectId: this.projectId
      })
        .then(res => {
          this.districtAdviceList = res.data;
        })
        .catch(res => {});
    },
    changeOne(id) {
      //单个修改情况
      this.changeTypeOne.id = id;
      this.dialogVisible = true;
    },
    changeAdviceOne() {
      //修改情况（单个）
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      changeAdviceOne(this.changeTypeOne)
        .then(res => {
          loading.close();
          this.$message({
            message: "提交成功！",
            type: "success"
          });
          this.dialogVisible = false;
          this.getAdviceList();
        })
        .catch(res => {
          loading.close();
        });
    },
    deleteOne(id) {
      //删除审查意见
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      deleteAdviceOne({ id: id })
        .then(res => {
          loading.close();
          this.$message({
            message: "删除成功！",
            type: "success"
          });
          this.getAdviceList();
        })
        .catch(res => {
          loading.close();
        });
    },
    //校验意见审查
    handleCheckOpinion: function() {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      let params = {
        linkId: "FEASIBILITY_STUDY_CITY_CENTER_EXAMINE",
        projectId: this.projectId
      };
      submitAdvice(params)
        .then(res => {
          loading.close();
          if (res.data.success == 2) {
            var length = res.data.resultList.length;
            this.$confirm(
              `存在${length}条审查意见未通过,是否回退到上一步流程？`,
              "回退确认",
              {
                distinguishCancelAndClose: true,
                closeOnClickModal: false,
                confirmButtonText: "回退",
                cancelButtonText: "不回退",
                lockScroll: true,
                type: "warning"
              }
            )
              .then(() => {
                const loading1 = this.$loading({
                  lock: true,
                  text: "Loading",
                  spinner: "el-icon-loading",
                  background: "rgba(0, 0, 0, 0.7)"
                });
                let params = {
                  link: "FEASIBILITY_STUDY_CITY_CENTER_EXAMINE",
                  projectId: this.projectId
                };
                submitProcessComeback(params)
                  .then(res => {
                    loading1.close();
                    this.$message.success("回退成功！");
                    setTimeout(() => {
                      this.$router.push(
                        "/projectManagement/planningStage/dealwith"
                      );
                    }, 1000);
                  })
                  .catch(() => {
                    loading1.close();
                  });
              })
              .catch(action => {
                if (action == "cancel") {
                  setTimeout(() => {
                    this.$router.push(
                      "/projectManagement/planningStage/dealwith"
                    );
                  }, 1000);
                }
              });
          } else {
            this.$message.success("操作成功！");
            setTimeout(() => {
              this.$router.push("/projectManagement/planningStage/dealwith");
            }, 1000);
          }
        })
        .catch(error => {
          loading.close();
        });
    },
    //意见类型切换
    handleSelectOpinionType: function(index) {
      this.opinionTypeIndex = index;
      if (index == 0) {
        this.getAdviceList();
      } else {
        this.getAdviceList1();
      }
    }
  },
  filters: {
    statusType(data) {
      //修改情况
      switch (data) {
        case 1:
          return "未整改";
          break;
        case 2:
          return "修改不通过";
          break;
        case 3:
          return "修改通过";
          break;
        case 4:
          return "正常";
          break;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.maincontent {
  padding: 20px 30px 40px;
  background: #ffffff;
  .contentbox {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    // -webkit-align-items: center;
    // align-items: center;
    .printImg {
      width: 58%;
      height: calc(100vh - 160px);
      img {
        width: 100%;
        display: block;
      }
      .arrow {
        text-align: center;
        .turn {
          cursor: pointer;
        }
        .pages {
          margin: 0 20px;
        }
      }
      .pdfBox {
        width: 100%;
        height: calc(100% - 38px);
        overflow-y: auto;
        border: 1px solid rgba(0, 0, 0, 0.05);
        /deep/ .annotationLayer {
          transform: scale(0) !important;
        }
      }
    }
    .opinionType {
      padding-left: 30px;
      padding-top: 20px;
      span {
        display: inline-block;
        padding: 8px 16px;
        color: rgba(153, 153, 153, 1);
        font-size: 16px;
        cursor: pointer;
      }
      .active {
        color: rgba(64, 158, 255, 1);
        background: rgba(238, 243, 248, 1);
      }
    }
    .addadvice {
      width: 40%;
      margin-left: 2%;
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      flex: 1;
      .header {
        margin-top: 24px;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        padding: 30px 30px 20px;
        border-bottom: 1px solid #e4e4e4;
        .title {
          -webkit-box-flex: 1;
          -webkit-flex: 1;
          flex: 1;
          font-size: 18px;
          font-family: PingFang SC;
          font-weight: bold;
          line-height: 25px;
          color: #4d4d4d;
        }
        .export {
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 500;
          line-height: 20px;
          color: #737373;
          display: flex;
          .dachuShenCha_item {
            margin: 0 5px;
          }
        }
      }
      .menulist {
        margin-top: 20px;
        margin-left: 30px;
        .item {
          width: 116px;
          height: 36px;
          background: #ffffff;
          line-height: 36px;
          text-align: center;
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #999999;
          margin-right: 24px;
          float: left;
          cursor: pointer;
          &.active {
            background: #eef3f8;
            color: #1d88f3;
          }
        }
        .add {
          float: right;
          width: 60px;
          height: 28px;
          background: rgba(64, 158, 255, 1);
          border-radius: 2px;
          text-align: center;
          line-height: 28px;
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #ffffff;
          margin-top: 4px;
          cursor: pointer;
          margin-right: 30px;
        }
      }
      .advicelist {
        margin-top: 10px;
        .item {
          padding: 20px 30px;
          display: -webkit-box;
          display: -webkit-flex;
          display: flex;
          -webkit-box-align: center;
          border-bottom: 1px solid #e4e4e4;
          .situation {
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            flex: 1;
            .msg {
              margin-top: 10px;
              font-size: 14px;
              font-family: PingFang SC;
              font-weight: 500;
              line-height: 20px;
              color: #8c8c8c;
            }
          }
          .other {
            text-align: right;
            .date {
              height: 18px;
              font-size: 13px;
              font-family: PingFang SC;
              font-weight: 500;
              line-height: 18px;
              color: #999999;
            }
            .delete {
              font-size: 14px;
              font-family: PingFang SC;
              font-weight: 500;
              line-height: 20px;
              //   margin-top: 12px;
              color: #f92828;
              margin-left: 20px;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}
</style>
